<template>
  <div class="app-container">
    <div class="filter-container">
<!--      <el-input size="small" v-model.trim="listQuery.submit_name" placeholder="姓名" style="width: 150px;" class="filter-item" @keyup.enter.native="handleFilter" />-->
      <!-- <el-select size="small" v-model="listQuery.sex" placeholder="性别" clearable style="width: 90px;" class="filter-item">
        <el-option v-for="item in importanceOptions" :key="item" :label="item" :value="item" />
      </el-select> -->
      <el-select size="small" v-model="listQuery.wx_nickname" placeholder="微信账户" clearable style="width: 260px;" class="filter-item">
        <el-option v-for="item in wx_nickname_datas" :key="item.wx_id" :label="item.wx_nickname" :value="item.wx_id" />
      </el-select>
<!--      <el-select size="small" v-model="listQuery.title" placeholder="活动" clearable style="width: 200px;" class="filter-item">-->
<!--        <el-option v-for="item in title_data" :key="item.tinymce_id" :label="item.title" :value="item.tinymce_id" />-->
<!--      </el-select>-->
      <el-autocomplete
        style="width: 300px;"
        size="small"
        class="inline-input"
        v-model="title_slect"
        :fetch-suggestions="querySearch"
        placeholder="请输入搜索，选择以下标题"
        @select="handleSelect"
      ></el-autocomplete>
      <el-input size="small" v-model.trim="listQuery.out_trade_no" placeholder="订单号" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-select size="small" v-model="listQuery.ispay" placeholder="是否支付" clearable style="width: 100px;" class="filter-item">
        <el-option v-for="item in ispay_data" :key="item.code" :label="item.text" :value="item.code" />
      </el-select>
      <el-date-picker
        class="filter-item"
      size="small"
      v-model.trim="listQuery.date1"
      type="datetime"
      placeholder="选择起始日期"
      value-format="yyyy-MM-dd HH:mm:ss">
    </el-date-picker>
      <el-date-picker
        class="filter-item"
        size="small"
        v-model.trim="listQuery.date2"
        type="datetime"
        placeholder="选择结束日期"
        value-format="yyyy-MM-dd HH:mm:ss">
      </el-date-picker>
      <el-button size="small" class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter" style="margin-left: 20px">
        查询
      </el-button>
      <!-- <el-button size="small" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
        新增
      </el-button> -->
     <el-button size="small"  :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
        导出Excel
     </el-button>
	 <el-button size="small"  :loading="downloadLoading" class="filter-item" type="danger" icon="el-icon-delete" @click="handleAllDelete">
        删除全部数据
     </el-button>
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
        <template slot-scope="{row,$index}">
          <!-- <el-button type="primary" size="mini" @click="handleUpdate(row)">
            编辑
          </el-button> -->
          <el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="handleDelete(row,$index)">
            删除
          </el-button>
          <el-button v-if="row.ispay=='已支付'&&row.refound_status!=1" size="mini" type="warning" @click="refound(row,$index)">
            立即退款
          </el-button>

        </template>
      </el-table-column>
      <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
<!--      <el-table-column label="姓名" >-->
<!--        <template slot-scope="scope">-->
<!--          {{ scope.row.submit_name }}-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="微信账户" >
        <template slot-scope="scope">
          {{ scope.row.wx_nickname }}
        </template>
      </el-table-column>
      <el-table-column label="头像"  align="center" width="110">
        <template slot-scope="scope">
          <viewer>
            <img :src="scope.row.wx_headimgurl" width="50" height="50" alt="">
          </viewer>
        </template>
      </el-table-column>
      <!-- <el-table-column label="性别" width="110" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.sex | sexFilter">{{scope.row.sex}}</el-tag>
        </template>
      </el-table-column> -->
      <el-table-column label="活动">
        <template slot-scope="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <el-table-column label="订单号">
        <template slot-scope="scope">
          {{ scope.row.out_trade_no  }}
        </template>
      </el-table-column>
      <el-table-column label="金额">
        <template slot-scope="scope">
          {{ scope.row.pay_price  }}
        </template>
      </el-table-column>
      <el-table-column label="是否支付">
        <template slot-scope="scope">
          <span v-if="scope.row.ispay=='已支付'" style="color: #ff433f;">已支付</span>
          <span v-else>未支付</span>
        </template>
      </el-table-column>
      <el-table-column label="退款状态">
        <template slot-scope="scope">
          <span v-if="scope.row.refound_status==1" style="color:#17dc19;">{{scope.row.refound_text}}</span>
          <span v-else-if="scope.row.refound_status==4" style="color: #ff433f;">{{scope.row.refound_text}}</span>
          <span v-else>{{scope.row.refound_text}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="支付时间" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.pay_time }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="提交时间" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.add_time }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchData" />
  </div>
</template>
<style>
/*.filter-container{*/
/*  padding-bottom: 20px;*/
/*}*/
.filter-item{
  margin: 5px 5px;
  margin-bottom: 20px;
}
</style>
<script>
import { getList,delList,delAllList,getWxNickName,refound } from '@/api/table'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
export default {
  filters: {
    sexFilter(sex) {
      const sexMap = {
        男: 'success',
        女: 'danger'
      }
      return sexMap[sex]
    },
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      ispay_data:[{text:'已支付',code:1},{text:'未支付',code:0}],
      title_slect:'',
      title_data:'',
      wx_nickname_datas:'',
      search_data:'',
      downloadLoading:false,
      table_name:'用户数据导出',
      importanceOptions:['男','女'],
      total: 0,
      listQuery: {
        page: 1,
        limit: 10,
        wx_nickname: undefined,
        code: undefined,
        out_trade_no: undefined,
        ispay:undefined,
        date1:undefined,
        date2:undefined,
      },
      list: null,
      listLoading: true
    }
  },
  created(e) {
    this.fetchData()
    this.serach_wx()
  },
  // mounted() {
  //   this.restaurants = this.title_data;
  // },
  methods: {
    querySearch(queryString, cb) {
      var restaurants = this.title_data.map((terminal) => {
        return {
          value: terminal.title,
          name: terminal.code,
        };
      });
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    handleSelect(item) {
      this.listQuery.code = item.name
      console.log(item);
    },
  /////////////////////
    handleFilter() {
      this.listQuery.page = 1
      this.fetchData()
    },
    sexVal(e){
      console.log(e)
      return "aaa";
    },
    handleCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    fetchData() {
      this.listLoading = true
      getList(this.listQuery).then(response => {
        // this.list = response.data.items
        this.list = response.data
        this.total = response.total
        this.listLoading = false
      })
    },
    serach_wx(){
      getWxNickName().then((res)=>{
        this.wx_nickname_datas = res.data
        this.title_data = res.data2
      })
    },
    handleDelete(row, index) {
      delList({id:row.id}).then(response => {
        // this.list = response.data.items
          if(response.status==200){
            this.$notify({
                title: 'Success',
                message: response.msg,
                type: 'success',
                duration: 2000
            })
            this.list.splice(index, 1)
        }else{
          this.$notify({
                title: 'Error',
                message: response.msg,
                type: 'error',
                duration: 2000
            })
        }
      })
    },
    refound(row, index){
      refound({out_trade_no:row.out_trade_no}).then((res)=>{
          if(res.status==200){
            this.$message({
              type: 'success',
              message: res.msg
            });
          }else if(res.status==201){
            this.$message({
              type: 'warning',
              message: res.msg
            });
          }else if (res.status==202){
            this.$message({
              type: 'warning',
              message: res.msg
            });
          }else if(res.status==500){
            this.$message({
              type: 'error',
              message: res.msg
            });
          }
      })
      this.fetchData()
    },
    handleAllDelete(){
      this.$prompt('请输入此账号的密码', '提示', {
        inputType:'password',
        showInput:true,
        inputPlaceholder:'请输入此账号的密码',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern:/\S/,
        inputErrorMessage: '密码不为空'
      }).then(({ value }) => {
        delAllList({admin_password:value}).then(response=>{
          if(response.status==200){
            this.$notify({
              title: 'Success',
              message: response.msg,
              type: 'success',
              duration: 2000
            })
            this.fetchData()
          }else {
            this.$notify({
              title: 'Error',
              message: response.msg,
              type: 'error',
              duration: 2000
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['ID', '微信昵称', '活动', '订单号', '金额','是否支付','支付时间','提交时间']
        const filterVal = ['id', 'wx_nickname', 'title', 'out_trade_no', 'pay_price','ispay','pay_time','add_time']
        const data = this.formatJson(filterVal, this.list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: this.table_name
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal) {
      return this.list.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    },

  },
  components:{
    Pagination
  }
}
</script>
